<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        background:#0A0F23;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
<div id="vbarChart" style="width:100%;height:100%;"></div>
<script src="../../components/echarts-4.0.4.min.js"></script>
<script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));

        var barOption = {
        	title: {
                text: '研究生培养情况',
                left: 'center',
                top:'5%',
                textStyle: {
                    color: '#fff',
                    fontSize: 22
                }
            },
		    backgroundColor: "#0A0F23",
		    color: ["#37A2DA", "#9FE6B8"],
            legend: { //图例组件，颜色和名字
                left: 'center',
                bottom: '5%',
                orient: 'horizontal',
                itemGap: 12, //图例每项之间的间隔
                itemWidth: 10,
                itemHeight: 10,
                icon: 'rect',
                data: ['在校生','毕业生'],
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
		    grid: {
		        containLabel: true
		    },
		    xAxis: [{
		        type: 'category',
		        boundaryGap: false,
		        axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
               	nameTextStyle: {
		            color: '#fff'
		        },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                    	fontSize: 16
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
						 color: 'rgba(204, 204, 204, 0.3)'
					}
                },
		        data: ['2011', '2012', '2013', '2014', '2015','2016','2017']
		    }],
		    yAxis: [{
		        type: 'value',
		        axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                    	fontSize: 16
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
						 color: 'rgba(204, 204, 204, 0.3)'
					}
                },
                name: '万人',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16
                }
		    }],
		    series: [{
		        type: 'line',
		        name: '在校生',
		        data: [10.84, 8.47, 8.7, 8.85, 9.14, 9.47, 10.41],
                itemStyle: {
                    normal: {
                        color: '#3498cd',
                        fontSize: 22
                    }
                }
            },{
		        type: 'line',
		        name: '毕业生',
		        data: [2.26, 2.30, 2.48, 2.41, 2.53, 2.48, 2.55],
                itemStyle: {
                    normal: {
                        color: '#99ddb1',
                        fontSize: 22
                    }
                }
		    }]
		};

        vbarChart.setOption(barOption);
    </script>
</body>
</html>